<template>
  <div class="newAppointmentContianer">
      <!-- 顶部返回 -->
      <div class="top">
          <div class="tleft" @touchend="$router.back()">
               <yd-icon name="back"  slot="icon" custom size="18px" ></yd-icon>
          </div>
          <div class="tmid">
               新建有约
          </div>
          <div class="tright" @click="todo">
              完成创建
         </div>    
      </div>
      <!-- 详细内容 -->
      <div class="detail">
            <yd-cell-item>
                <span slot="left">主题：</span>
                <yd-input slot="right" v-model="topic"  placeholder="请输入主题"></yd-input>
            </yd-cell-item>
            <yd-cell-item arrow>
                <span slot="left">地点：</span>
                <yd-input slot="right" @click.native="tochose" readonly placeholder="请在地图上选取地点" v-model="address"></yd-input>
            </yd-cell-item>
        <yd-cell-item arrow>
            <span slot="left">起始时间：</span>
            <yd-input slot="right" @click.native="openPicker" v-model="fromtime"  readonly placeholder="请输入内容"></yd-input>
        </yd-cell-item>
        <yd-cell-item arrow>
            <span slot="left">截止时间：</span>
            <yd-input slot="right" @click.native="toPicker" v-model="totime" readonly	  placeholder="请输入内容"></yd-input>
        </yd-cell-item>
        <div class="poi">
            <span slot="left">是否开启定位：</span>
            <yd-switch v-model="poi" class="switch"></yd-switch>
        </div>
        <!-- 邀请好友 -->
         <yd-accordion >
            <yd-accordion-item title="邀请好友加入">
                 <yd-checklist v-model="checklist" v-if="status==2&&friendShow==true">
                    <yd-checklist-item :val="item.friendID" v-for="(item,n) in friend" :key="n">
                        <div class="userDetail">
                            <div class="left">
                                <img :src="item.user.photo" >
                            </div>
                            <div class="mid">
                                <p style="line-height:1rem" v-if="item.remark==''">{{item.user.name}}</p>
                                <p style="line-height:1rem" v-if="item.remark!=''">{{item.remark}}</p>
                            </div>
                        </div>
                    </yd-checklist-item>
                 </yd-checklist>
                 <div :val="item.id" v-for="(item,n) in friend" :key="n" v-if="status==1&&friendShow==true">
                        <div class="userDetail" style="border-bottom:1px solid #d7d7d7"  @click="check">
                        <input type="radio" :value="item.friendID" name="radio" class="myradio">                             
                            <div class="left">
                                <img :src="item.user.photo" >
                            </div>
                            <div class="mid">
                                <p style="line-height:1rem" v-if="item.remark==''">{{item.user.name}}</p>
                                <p style="line-height:1rem" v-if="item.remark!=''">{{item.remark}}</p>
                            </div>
                        </div>                    
                 </div>
            </yd-accordion-item>       
         </yd-accordion>
        <!-- 邀请亲友 -->
         <yd-accordion>
            <yd-accordion-item title="邀请关注的人加入">
                 <yd-checklist v-model="checklist1"  v-if="status==2&&focusShow==true">
                    <yd-checklist-item :val="item.attentionUserID" v-for="(item,n) in focus" :key="n">
                        <div class="userDetail" >
                            <div class="left">
                                <img :src="item.user.photo">
                            </div>
                            <div class="mid">
                                <p style="line-height:1rem" v-if="item.remark==''">{{item.user.name}}</p>
                                <p style="line-height:1rem" v-if="item.remark!=''">{{item.remark}}</p>
                            </div>
                        </div>
                    </yd-checklist-item>
                 </yd-checklist>
                 <div :val="item.id" v-for="(item,n) in focus" :key="n" v-if="status==1&&focusShow==true">
                        <div class="userDetail" style="border-bottom:1px solid #d7d7d7" @click="check">
                        <input type="radio" :value="item.attentionUserID" name="radio" class="myradio">                             
                            <div class="left">
                                <img :src="item.user.photo" >
                            </div>
                            <div class="mid">
                                <p style="line-height:1rem" v-if="item.remark==''">{{item.user.name}}</p>
                                <p style="line-height:1rem" v-if="item.remark!=''">{{item.remark}}</p>
                            </div>
                        </div>                    
                 </div>                 
            </yd-accordion-item>       
         </yd-accordion>                   
        <!-- 时间选择器 -->
        <mt-datetime-picker ref="frompicker" type="datetime" v-model="pickerValue" @confirm="fristTime" :startDate="startDate" :endDate="ednDate">
        </mt-datetime-picker>
        <mt-datetime-picker ref="topicker" type="datetime" v-model="topickerValue" @confirm="secondTime" :startDate="startDate" :endDate="ednDate">
        </mt-datetime-picker>
      </div>
        <baidu-map class="map" :double-click-zoom="false" :center="{lng: myGps.lng, lat: myGps.lat}" :zoom="12" v-if="mapshow" @click="chosePoi">
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        </baidu-map>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import $ from "jquery"
import { MessageBox } from 'mint-ui';
import {getDate} from '@/common/js/base/time.js'
export default {
  data(){
      return{ 
          friendShow:false,//好友列表
          focusShow:false,//关注列表
          topic:"",//主题
          pickerValue:"",//选取时间
          fromtime:'',//起始时间 
          topickerValue:"",//选取时间
          totime:"",//截止时间
          poi:"",//位置开启否
          checklist:[],//选择内容
          checklist1:[],//选择内容
          mapshow:false,//地图显示隐藏
          address:"",//地址
          position:null,//坐标
          radio:'',//单选
          appID:"",//有约ID
          time1:"",//起始时间
          time2:"",//结束时间
          myGps:null,//自己位置
          startDate:new Date("2018/1/1 00:00:00"),//起始时间
          ednDate:new Date("2088/12/31 23:59:59"),//结束时间
          friend:[
              {"name":"张三",id:"1"},
              {"name":"张三",id:"2"},
              {"name":"张三",id:"3"},
          ],
          focus:[
              {"name":"张三",id:"4"},
              {"name":"张三",id:"5"},
              {"name":"张三",id:"6"},              
          ]
      }
  },
  computed:{
      status(){//判断
          return this.$route.query.type
      },
      now(){//获取当前时间

      }
  },
  methods:{
      todo(){//完成创建

          if(this.topic==""){
              MessageBox.alert('主题不能为空')
          }else if(this.address==""){
               MessageBox.alert('地址不能为空')
          }else if(this.time1==""){
               MessageBox.alert('起始时间不能为空')
          }else if(this.time2==""){
               MessageBox.alert('截止时间不能为空')
          }else if(Date.parse(this.pickerValue)>Date.parse(this.topickerValue)){
              MessageBox.alert('起始时间不能大于截止时间')
          }else{
            let data={
                userID:localStorage.userid,
                event:this.topic,
                site:this.address,
                lat:this.position.lat,
                lng:this.position.lng,
                appointStartTime:this.time1,
                appointEndTime:this.time2,
                gps:this.poi,
                appointType:this.status
            }
          this.ylAjax.newAppoint(data)
                     .then(res=>{//新建有约
                         if(res.state==0){
                             this.appID=res.data;
                             if(this.checklist.length>0||this.checklist1.length>0||this.radio!=""){
                                this.invite()
                                let tost=Toast({
                                    message: '创建成功,即将返回',
                                    iconClass: 'icon icon-success'
                                    });
                                setTimeout(() => {
                                    tost.close();
                                    this.$router.back()
                                    }, 1000);
                             }
                         }
                     })
              }                 
      },
      showPosition() {//查看位置
            let poi={
                userId: localStorage.userid
            }
            this.ylAjax.showPoi(poi)
            .then(res=>{
                if(res.state==0){
                console.log(res)
                //  console.log(this.mypoi)
                this.myGps=res.data
                }
            })
      },          
      invite(){//邀请好友加入
        if(this.status==2){
           let a= this.checklist.concat(this.checklist1);
           let n = [];
            for(let i=0;i<a.length;i++){//数组去重
                if(n.indexOf(a[i])==-1){
                    n.push(a[i])
                }
            }
            var data={
                appointID:this.appID,
                srcUserID:localStorage.userid,
                userIDS:n.toString()
            }            
        }else{
            var data={
                appointID:this.appID,
                userIDS:this.radio.toString(),
                srcUserID:localStorage.userid
            }   
        }    
        this.ylAjax.createApplication(data)
                   .then(res=>{
                       if(res.data==0){
                             
                       }
                   })
      },
      friendList(){//好友列表更新
            let data={
                userId:localStorage.userid
            }          
          this.ylAjax.friendList(data)
                     .then(res=>{
                         console.log(res)
                         this.friend=res.data
                         this.friendShow=true
                     })
      },
      focusList(){//关注列表更新
        let data={
            userId:localStorage.userid
        }
        this.ylAjax.showMyFocus(data)
            .then(res=>{
                if(res.state==0){
                    console.log(res)
                    this.focus=res.data
                    this.focusShow=true
                }
            })        
      },
      check(e){//单选列表
          e.currentTarget.firstElementChild.checked=true
          this.radio=e.currentTarget.firstElementChild.value    
      },
      openPicker() {//打开起始时间选择
        this.$refs.frompicker.open();
      },
      toPicker(){//截止时间选择器
        this.$refs.topicker.open();        
      },
      fristTime(){//第一次选择时间
        if(this.pickerValue!=""){
            let time=getDate(this.pickerValue.valueOf())
            this.fromtime =time.year+"年"+time.mounth+"月"+time.day+"日"+" "+time.hours+":"+time.minutes
            this.time1=time.year+"-"+time.mounth+"-"+time.day+" "+time.hours+":"+time.minutes+":"+time.second           
        }
      },
      secondTime(){//第二次选择时间
        if(this.topickerValue!=""){
            let time=getDate(this.topickerValue.valueOf())
            this.time2=time.year+"-"+time.mounth+"-"+time.day+" "+time.hours+":"+time.minutes+":"+time.second          
            this.totime=time.year+"年"+time.mounth+"月"+time.day+"日"+" "+time.hours+":"+time.minutes
        }
      },
      tochose(){//打开地图
           let instance = Toast('请点击地图，选择目的地');
           this.showPosition()
            setTimeout(() => {
                    instance.close();
                    this.mapshow=true
                }, 500);            
      },
      chosePoi(e){//获取坐标
        let that=this;
          that.position={
              lng:e.point.lng,
              lat:e.point.lat
          }
          $.get({//百度地图逆地址解析
              url:"http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location="+e.point.lat+","+e.point.lng+"&output=json&pois=1&ak=fUEcThvZhsCij8Zb9ihP97Giq9PQyACS",
              dataType:'jsonp',
              success:function(data){
                  that.address=data.result.formatted_address+","+data.result.sematic_description;
                  let a=that.address 
                  MessageBox.confirm('您选取的地址为:'+'<p style="color:black;">'+a+"</p>").then(action => {
                    that.mapshow=false
                    console.log(that.position)
                });       
              }
            }
          )
      }
  },
  created(){
      this.friendList()
      this.focusList()
  },
  mounted(){
      
  }
}
</script>

<style lang="less" scoped>
  @import "~less/base";
    .newAppointmentContianer{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        .top{//顶部菜单
           height: 1rem;
           line-height: 1rem ;
           background-color: @background-a;
           color: @color-t;
           display: flex;
           text-align: center;
           .tleft{
               flex: 0 0 20%;
           }
           .tmid{
               flex: 0 0 60%;
               text-align: center;
               font-size: 16px;
           }
           .tright{
               font-size: 14px;
           }
        }
        .detail{
            // margin: .3rem ;
            background-color: #ffffff;
            position: absolute;
            top: 1.3rem;
            bottom: 0%;
            left: 0;
            right: 0;
            overflow-y:auto;
            .poi{//位置权限
                height: 1rem;
                line-height: 1rem;
                padding-right: 0.24rem;
                margin-left: 0.29rem;
                border-bottom: 1px solid #d9d9d9;
                font-size: .3rem;
                .switch{
                    float: right;
                    margin-top: .15rem;
                }
            }
            .myradio{
                margin-top: .35rem;
                margin-left: .2rem;
                width: .3rem;
                height: .3rem;
                background-color: green;
            }
            .userDetail{//选项列表详情
                display: flex;
                line-height: 1rem;
                .left{
                    flex: 0 0 20%;
                    text-align: center;
                    img{
                        width: .8rem;
                        border-radius: 50%;
                        vertical-align: middle
                    }                    
                }
                .mid{
                    flex:  0 0 60%;
                }

            }
        }
        .map{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
        }
    }
</style>
